<template>
  <view class="page-container">
    <view class="view-title">
      车辆信息
      <view></view>
    </view>
    <view class="select-item">
      <view class="item-left">
        <text class="star">*</text>
        <text class="name">选择车型</text>
      </view>
      <view class="item-right" @click="selectCar">
        <view class="caraa" v-if="currentCar.name">
        	<view class="car-name">{{ currentCar.name }} {{currentCar.source_type_name}}</view>
			<view class="guide_price" v-if="currentCar.guide_price">指导价：{{currentCar.guide_price}}万</view>
        </view>
        <text class="placeholder" v-else>请选择车型</text>
        <uni-icons type="right" size="14" color="#999"></uni-icons>
      </view>
    </view>
    <view class="select-item">
      <view class="item-left">
        <text class="star">*</text>
        <text class="name">外观内饰</text>
      </view>
      <view class="item-right" @click="selectInterior">
        <text
          v-if="currentColor.appearance && currentColor.interior"
          class="selc"
          >{{ currentColor.appearance.name }} | {{ currentColor.interior.name }}</text
        >
        <text class="placeholder" v-else>请选择外观内饰</text>
        <uni-icons type="right" size="14" color="#999"></uni-icons>
      </view>
    </view>
    <view class="select-item">
      <view class="item-left">
        <text class="star">*</text>
        <text class="name">上牌地区</text>
      </view>
      <view class="item-right" @click="selectArea">
        <text v-if="currentRegion.where_city.name" class="selc">{{
          currentRegion.where_city.name
        }}</text>
        <text class="placeholder" v-else>请选择</text>
        <uni-icons type="right" size="14" color="#999"></uni-icons>
      </view>
    </view>
    <!-- 备注 -->
    <view class="mark">
      <text>备注</text>
      <view class="mark-tag">
        <view
          :class="{ active: selectTags.indexOf(item.name) > -1 }"
          class="tag-item"
          v-for="(item, index) in tagList"
          :key="index"
          @click="tagCLick(item)"
          >{{ item.name }}</view
        >
      </view>
      <textarea v-model="mark" placeholder="请输入"></textarea>
    </view>
    <!-- 寻车置顶 -->
    <view class="zhiding">
      <view class="t1">寻车置顶</view>
      <view class="t2">{{newsTopping}}</view>
    </view>
    <view class="confirm-btn" @click="confirmRelease">确定</view>
  </view>
</template>

<script>
import {
  carsBrandList,
  newsCarsSearchReleaseAdd,
  usedSearchNotes
} from "../../../../api/newCarSerach.js";
import { configInfo } from '@/api/base.js'
export default {
  components: {},
  data() {
    return {
      users_id: uni.getStorageSync("login").id,
      tagList: [],
      selectTags: [],
      mark: "",
      currentCar: {},
      currentColor: {},
      currentRegion: {},
	  newsTopping:''
    };
  },
  mounted() {
	configInfo('news_topping').then(res => {
		this.newsTopping = res.data.data
	})
	usedSearchNotes(1).then( res =>{
		this.tagList = res.data
	})
  },
  methods: {
    tagCLick(tag) {
      if (this.selectTags.indexOf(tag.name) > -1) {
        this.selectTags.forEach((name, i) => {
          if (name === tag.name) {
            this.selectTags.splice(i, 1);
          }
        });
      } else {
        this.selectTags.push(tag.name);
      }
    },
    // 选择车型
    selectCar() {
      uni.navigateTo({
        url: "/pages/home/newCarSearch/releaseCar/selectBrand/selectBrand",
      });
    },
    // 选择内饰
    selectInterior() {
      if (this.currentCar.name) {
        uni.navigateTo({
          url: `/pages/home/newCarSearch/releaseCar/selectColor/selectColor?model_id=${this.currentCar.id}&type=${this.currentCar.type}`,
        });
      } else {
        uni.showToast({
          title: "请先选择车型",
          icon: "none",
        });
      }
    },
    // 选择上牌地区
    selectArea() {
      if (this.currentCar.name) {
        uni.navigateTo({
          url: "/pages/home/newCarSearch/releaseCar/selectRegion/selectRegion",
        });
      } else {
        uni.showToast({
          title: "请先选择车型",
          icon: "none",
        });
      }
    },
    backData(data) {
      if (data.type === "model") {
        this.currentCar = data.data;
      } else if (data.type === "color") {
        this.currentColor = data.data;
      } else if (data.type === "region") {
        this.currentRegion = data.data;
      }
	  console.log(this.currentCar)
    },
    // 确定发布
    confirmRelease() {
      if (!this.currentCar?.name) {
        uni.showToast({
          title: "请先选择车型",
          icon: "none",
        });
        return;
      }
      if (!this.currentColor?.appearance?.name) {
        uni.showToast({
          title: "请先选择外观内饰",
          icon: "none",
        });
        return;
      }
      if (!this.currentRegion?.where_city?.id) {
        uni.showToast({
          title: "请先选择上牌地区",
          icon: "none",
        });
        return;
      }
      newsCarsSearchReleaseAdd({
        users_id: this.users_id, //用户id
        brand_id: this.currentCar.brand_id, //品牌id
        series_one_id: this.currentCar.series_one_id, //一级车系id
        series_two_id: this.currentCar.series_two_id, //二级车系id
        source_type_id: this.currentCar.source_type_id, //车源类型id
        model_one_id: this.currentCar.pid, //一级车型id
        model_two_id: this.currentCar.id, //二级车型id
        custom_name: this.currentCar.name, //自定义名称
        appearance_id: this.currentColor.appearance.id, //外观主键id
        appearance_name: this.currentColor.appearance.name, //外观名称
        appearance_color: this.currentColor.appearance.color, //外观色号
        interior_id: this.currentColor.interior.id, //内饰主键id
        interior_name: this.currentColor.interior.name, //内饰名称
        interior_color: this.currentColor.interior.color, //内饰色号
        registration_province_id: this.currentRegion.where_province.id, //省id
		registration_province: this.currentRegion.where_province.name, //省名称
        registration_city_id: this.currentRegion.where_city.id, //市id
		registration_city: this.currentRegion.where_city.name, //市名称
        notes: this.selectTags, //备注
        describe: this.mark, //描述
      }).then((res) => {
        if (res.code == 0) {
          uni.showToast({
            title: "发布成功",
            duration: 1000,
          });
          setTimeout(() => {
            var pages = getCurrentPages();
            var prevPage = pages[pages.length - 2];
            prevPage.$vm.refreshSearchCar();
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        } else {
          uni.showToast({
            title: res.message,
            icon: "none",
          });
        }
      });
    },
  },
};
</script>

<style>
page {
  height: 100%;
}
</style>
<style lang='scss' scoped>
.page-container {
  color: #000;
  border-top: 20rpx solid #f7f8fa;
  background-color: #fff;
  height: 100%;
  padding: 30rpx 0;
  .view-title {
    padding: 0 28rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 800;
    color: #05052a;
    line-height: 18rpx;
    position: relative;
    display: inline-block;
    view {
      width: 50rpx;
      height: 20rpx;
      background: #6098fd;
      border-radius: 40rpx;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -5px;
      opacity: 0.4;
    }
  }
  .select-item {
    padding: 35rpx 25rpx;
    border-bottom: 1rpx solid #e6e6e6;
    display: flex;
    justify-content: space-between;
    .item-left {
      display: flex;
      align-items: center;
      .star {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ff0f0f;
        margin-right: 14rpx;
      }
      .name {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        white-space: nowrap;
      }
    }
    .item-right {
      display: flex;
      align-items: center;
      .more {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        margin-left: 15rpx;
      }
      .placeholder {
        margin-left: 200rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
      }
	  .caraa{
		  margin-left: 150rpx;
		  view{
			  text-align: right;
			  &.car-name{
				  font-size: 28rpx;
				  font-family: PingFang SC;
				  font-weight: 500;
				  color: #000000;
			  }
			  &.guide_price{
				  margin-top: 10rpx;
				  font-size: 24rpx;
				  color: #999;
			  }
		  }
	  }
      .selc {
        margin-left: 150rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
      }
    }
  }
  .mark {
    padding: 40rpx 28rpx;
    > text {
    }
    .mark-tag {
      margin: 8rpx 0 28rpx;
      .tag-item {
		margin-top: 20rpx;
        width: 180rpx;
        height: 54rpx;
        border: 2rpx solid #e1e2e3;
        border-radius: 28rpx;
        text-align: center;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 50rpx;
        color: #1c2125;
        display: inline-block;
        margin-right: 20rpx;
        &.active {
          background: #edf1ff;
          color: #1960eb;
          border-color: #edf1ff;
        }
      }
    }
    textarea {
      width: 100%;
      border: 2rpx solid #e6e6e6;
      padding: 20rpx;
      border-radius: 10rpx;
      height: 150rpx;
    }
  }
  .zhiding {
    padding: 0 28rpx;
    .t1 {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
    }
    .t2 {
      margin-top: 25rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
    }
  }
  .confirm-btn {
    position: fixed;
    left: 28rpx;
    right: 28rpx;
    bottom: 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #2d56c5;
    border-radius: 14rpx;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
  }
}
</style>
